import React, { memo,useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'

import { getTopListAction } from '../../store/actionCreators'

import MSNTopRanking from '@/components/top-ranking'
import MSNThemeHeaderRCM from '@/components/theme-header-rcm'
import { RankingWrapper } from './style'

// 飙升榜：19723756、新歌榜：3779629、原创榜id：2884035
const MSNRecommendRanking = memo(() => {

  // redux hooks
  const { upRanking, newRanking, originRanking } = useSelector( state => ({
    upRanking: state.getIn(['recommend','upRanking']),
    newRanking: state.getIn(['recommend','newRanking']),
    originRanking: state.getIn(['recommend','originRanking']),
  }))
  const dispatch = useDispatch()
  useEffect(()=>{
    dispatch(getTopListAction(19723756))
    dispatch(getTopListAction(3779629))
    dispatch(getTopListAction(2884035))
  },[dispatch])
  return (
    <RankingWrapper>
      <MSNThemeHeaderRCM title='榜单'/>
      <div className='tops'>
        <MSNTopRanking info={upRanking}/>
        <MSNTopRanking info={newRanking}/>
        <MSNTopRanking info={originRanking}/>
      </div>
    </RankingWrapper>
  )
})

export default MSNRecommendRanking